<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:replace="_fragments::head(文章详情)">
	 <meta charset="utf-8" /> 
	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
	 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
  
  </head>
  <body>
	<!-- 导航条 -->
	<nav th:replace="_fragments::nav(1)" class="navbar navbar-default navbar-fixed-top " style="background-color: rgba(0,0,0,0.5);border: 0.5px;">
	 
	</nav>
	<!--表头主体背景-->
	<div style="height: 265px;">
	<div id="header-blog"  style=" height:365px; background-image: url(image/1.jpg); background-size:cover; background-position: center;background-repeat: no-repeat;margin: 0 auto;
		position: relative;z-index: -1;">
	</div>
	</div>
	<!-- 中间主体 -->
	<div id="main" class="container">
	<input id="bid" type="hidden" th:value="${blogid}"/>
		<div class="row">
			<!--正文-->
			<div class="col-md-9 panel panel-default" style="padding: 0px;">
				<!--标注-->
				<div class="panel-heading" style="background:#fff">
					<div class="pull-left" style="color:#a7a7a7;">
						<span class="label label-default">杂记</span>
					</div>
					<div class="pull-right">
						<span><a href="index.html">博客</a> &nbsp;/&nbsp;</span>
						<span style="">正文</span>
					</div>
					<div class="clearfix"></div>
				</div>
				<!--正文-->
				<div class="panel-body" style="margin: 10px 15px;">
					<div id="blog-text-head" style="text-align: center;">
						<h2>{{blog.title}}</h2>
						<div style="color:#a7a7a7; font-size: 10px;">
							<br/>
							<span class="glyphicon glyphicon-user"></span>
							<span> &nbsp;{{user.username}}</span>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<span class="glyphicon glyphicon-edit"></span>
							<span> &nbsp;发表日期：{{blog.createtime}}</span>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<span class="glyphicon glyphicon-eye-open"></span>
							<span> &nbsp;{{blog.browsenum}}</span>
						</div>
					</div>
					<div id="blog-text-content"  class="js-toc-content">
					</div>
					<div id="blog-text-footer" style="margin:50px 20px;">
						<div style="border-bottom: 1px solid #ddd;">
							
						</div>
						<div style="text-align: center; margin: 20px 20px;">
						<a class="btn-zan btn btn-primary" style="font-size: 20px ;border-radius:50%;height: 45px;width: 45px;">赞</a>
						</div>
					</div>
				</div>
					<!--底部评论区-->
				<div class="panel-body" style="border-top: 1px solid #ddd;">
					<div class="panel panel-default">
					  <div class="panel-heading">评论区</div>
					  <!--最新评论-->
					  <div class="panel-body">
					    <h4>最新评论</h4>
					    <br/>
					    <ul v-for="comment in comments.list" class="list-group" style="border: 0px; margin-bottom: 0px;">
					    	<li class="list-group-item">
					    		<div>
					    			<h5><b>{{comment.user.username}}</b> &nbsp;&nbsp;&nbsp;&nbsp;<span class="content-footer">{{comment.createtime}}</span></h5>
					    			<p>{{comment.content}}</p>
					    			<a href="#"><span class="content-footer">回复</span></a>
					    		</div>
					    	</li>
					    </ul>
					    <nav aria-label="Page navigation">
						  <ul class="pagination">
						    <li>
						      <a id="up" class="btn" aria-label="Previous" v-on:click="commentajax(comments.pageNum-1,blog.blogid)">
						        <span aria-hidden="true">上一页</span>
						      </a>
						    </li>
			 			    <li class="active"><a>{{comments.pageNum}}</a></li>
						    <li>
						      <a id="down" class="btn"  aria-label="Next" v-on:click="commentajax(comments.pageNum+1,blog.blogid)">
						        <span aria-hidden="true">下一页</span>
						      </a>
						    </li>
						    <li class="disabled">
						        <a class="btn">总页数：{{comments.pages}}</a>
						    </li>
						  </ul>
						</nav>
					  </div>
					  <!--发布区-->
					  <div class="panel-body" style="border-top: 1px solid #ddd;">
					  	<form>
						  <div class="form-group">
						    <textarea  class="form-control" v-model:value="commentdata"></textarea>
						  </div>
						  <button v-on:click="pubComment()" class="btn btn-default">发表评论</button>
						</form>
					  </div>
					</div>
				</div>
			</div>

			<!--侧边目录-->
			<div id="sder-main" class="col-md-3" style="margin-top: 51px;">
				<div class="panel panel-default" style="padding: 10px 15px;">
					<div>
					<ol class="js-toc">
					</ol>	
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--中间结束-->

	<!-- 底部 -->
	<footer th:replace="_fragments::footer" class="panel-footer" style="background: #2a2730; color: #fff">
	</footer>
	
	<div th:replace="_fragments::js">
	<!--底部结束-->
		<!--     jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery/jquery-2.1.1.min.js" th:src="@{/jquery/jquery-2.1.1.min.js}" ></script>
	<!--     加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}" ></script>
    <!-- 自定义js -->
    <script src="/js/bootstrap.min.js" th:src="@{/js/index.js}" ></script>
    </div>
</body>
  
  
<script>
/*<![CDATA[*/
/* $(function(){
    var content_arr = []; //定义一个空数组
    $(".content-p").each(function() { //遍历box内容
        var content = $.trim($(this).text()); //去掉前后文空格
        content_arr.push(content); //内容放进数组
    })
    for (var i=0;i<content_arr.length;i++){//遍历循环数组
        if (content_arr[i].length >= 80) { //如果数组长度（也就是文本长度）大于等于80（数字可自己定义）
            content = content_arr[i].substr(0, 80) + '...'; //添加省略号并放进box文字内容后面
            $(".content-p").eq(i).text(content);
        } else {
            content = content_arr[i];
            $(".content-p").eq(i).text(content);
        }
    }
}); */
/*]]>*/
 
//准备数据
var data = [{"title":"陈二狗的妖孽人生","content":"一个农村刁民的逆天人生。衣衫褴褛的老人蹲坐在破败房子前的白桦木墩子上，喝一口自制的烧酒，抽一口极烈的青蛤蟆旱烟，眯起眼睛，望着即将落入长白山脉的夕阳，朝身旁一个约莫六七岁、正陪着一黑一白两头土狗玩耍的小孩子说道：“浮生，最让东北虎忌惮的畜生，不是皮糙肉厚的黑瞎子，也不是600斤的野猪王，而是上了山的守山犬。”"},
		{"title":"陈二狗的妖孽人生","content":"一个农村刁民的逆天人生。衣衫褴褛的老人蹲坐在破败房子前的白桦木墩子上，喝一口自制的烧酒，抽一口极烈的青蛤蟆旱烟，眯起眼睛，望着即将落入长白山脉的夕阳，朝身旁一个约莫六七岁、正陪着一黑一白两头土狗玩耍的小孩子说道：“浮生，最让东北虎忌惮的畜生，不是皮糙肉厚的黑瞎子，也不是600斤的野猪王，而是上了山的守山犬。”"},
		{"title":"陈二狗的妖孽人生","content":"一个农村刁民的逆天人生。衣衫褴褛的老人蹲坐在破败房子前的白桦木墩子上，喝一口自制的烧酒，抽一口极烈的青蛤蟆旱烟，眯起眼睛，望着即将落入长白山脉的夕阳，朝身旁一个约莫六七岁、正陪着一黑一白两头土狗玩耍的小孩子说道：“浮生，最让东北虎忌惮的畜生，不是皮糙肉厚的黑瞎子，也不是600斤的野猪王，而是上了山的守山犬。”"}
]

 
//通过vue.js 把数据和对应的视图关联起来
var url = "http://localhost:8888/blogMarkdown";
new Vue({
      el: '#main',
      data: {
        blog: [],
        user:[],
        id:1,
        comments:[],
        commentdata:""
      },
      created:function(){
    	  var seft=this;
    	  var sderheight=$("#sder-main").offset().top;//目录位置高度
    	  var bid=$("#bid").val();
    	  seft.id=bid;
    	  $.ajax({
				url:url+"/"+seft.id,
				type:'get',  
				//async: false,//同步
				//dateType:"json",
				success : function(ret){
					seft.blog=ret.data;
					$("#blog-text-content").html(seft.blog.content);
					//目录生成初始化
			    	  tocbot.init({
			    	  // Where to render the table of contents.这是生成的目录区域
			    	  tocSelector: '.js-toc',	
			    	  // Where to grab the headings to build the table of contents.这是目录源内容区域
			    	  contentSelector: '.js-toc-content',
			    	  // Which headings to grab inside of the contentSelector element.//这是目录级数
			    	  headingSelector: 'h1, h2, h3',
			    	  // For headings inside relative or absolute positioned containers within content.
			    	  hasInnerContainers: true,
			    	});
			    	seft.user=seft.blog.user;
			    	
			    	//显示该博客评论
			    	seft.commentajax(1,seft.blog.blogid);
				},
				fail:function(){
					console.log("请求错误:");
				}
			}); 
    	  //设置目录区域随滚动条移动
    	  $(window).scroll(function() {
    		    var wh=$(this).scrollTop()
    		    if(wh>(sderheight-30)){
    		    	$("#sder-main").addClass("fixe");
    		    }else{
    		    	$("#sder-main").removeClass("fixe");
    		    }
    		});
      },
      methods:{//所有方法必须在method里创建
    	  commentajax:function(startnum,blogid){
    		var seft=this;
			$.ajax({
				url:"http://localhost:8888/comment",
				type:'get',
				data:{start:startnum,blogid:blogid},
				//async: false,//同步
				success : function(data){
					seft.comments=data.data;
					if(seft.comments.pageNum>1){
						$("#up").removeClass("disabled");
					}else{
						$("#up").addClass("disabled");
					}
 					if(seft.comments.pageNum>=seft.comments.pages){
						$("#down").addClass("disabled");
					}else{
						$("#down").removeClass("disabled");
					} 
					
				},
				fail:function(){
					console.log("请求失败:");
				}
			});
      	},
      	pubComment:function(){
      		var seft=this;
      		//var date=new Date();
      		var comment={
      				content:seft.commentdata,
      				blogid:seft.blog.blogid,
      				userid:2			//留言用户统一用游客账号
      		};
      		$.ajax({
				url:"http://localhost:8888/comment",
				type:'post',
				data:JSON.stringify(comment),
				contentType:"application/json",
				success : function(data){
					if(data.result="success"){
						alert("留言成功");
						seft.commentajax(1,seft.blog.blogid);
					}else
						alert("留言失败"+data.message);
				},
				fail:function(){
					alert("请求失败")
				}
			});
      	}
    	  
      }
    })

</script>
</html>